<template>
  <section class="todoapp">
    <!-- 头部 -->
    <TodoHeader @addTodo="addTodoPar"/>
    <!-- 主体 -->
    <TodoMain :arr="showList" @delTodo="delTodoPar"/>
    <!-- 底部 -->
    <TodoFooter v-if="list.length>0" :arr="list" @switchTodo="switchTodoPar" @clearTodo="clearTodoPar"/>
  </section>
</template>

<script>
import "./assets/ccs/base.css";
import "./assets/ccs/index.css";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  data() {
    return {
           list:JSON.parse(localStorage.getItem('todo'))|| [
            { id: 100, name: "吃饭", isDone: true },
            { id: 201, name: "睡觉", isDone: false },
            { id: 103, name: "打豆豆", isDone: true },
          ],
          TypePar:'all',
    };
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  methods:{
    addTodoPar(name){
      const obj={
        id:Date.now(),
        name,
        isDone:false,
      }
      this.list.push(obj)
    },
    delTodoPar(i){
      this.list.splice(i,1)
    },
    switchTodoPar(switchType){
      // console.log(switchType);
      this.TypePar=switchType
    },
    clearTodoPar(){
    this.list=this.list.filter(item=>item.isDone===false)
    }
  },
  computed:{
    showList(){
      if(this.TypePar==='all'){
        return this.list
      }else if(this.TypePar==='no'){
        return this.list.filter(item=>item.isDone===false)
      }else{
        return this.list.filter(item=>item.isDone===true)
      }
    }
  },
  watch:{
    list:{
      deep:true,
      handler(newVal){
        localStorage.setItem('todo',JSON.stringify(newVal))
      }
    }
  }
};
</script>

<style>
</style>